<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-menu-item @click="click1()" index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">监控</span>
    </el-menu-item>
    <el-menu-item @click="click2()" index="2">
        <i class="el-icon-setting"></i>
        <span slot="title">host资源占用率</span>
    </el-menu-item>
    <el-menu-item @click="click3()" index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">ssh资源占用率</span>
    </el-menu-item>
  </el-menu>
</template>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 800px;
  } 
  .el-menu {
      height: 100%;
      border: none;
      h3 {
          color: #fff;
          text-align: center;
          line-height: 48px;
      }
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        menu: [
            {
                path: '/',
                name: 'monitor',
                label: '虚拟机列表和服务器列表监控',
                icon: '',
                url: 'monitor/monitor'
            },
            {
                path: '/',
                name: 'occupancy',
                label: '各个资源占用率',
                icon: '',
                url: 'occupancy/occupancy'
            },
        ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      click1(){
        this.$router.push({
          name: 'Monitor',
        })
      },
      click2(){
        this.$router.push({
          name: 'Occupancy',
        })
      },
      click3(){
        this.$router.push({
          name: 'Ssh',
        })
      }
    }
  }
</script>